<template>
  <div class="login">
    <div class="login-content">
      <span class="logo">登录</span>
      <div class="login-form">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="username" >
            <el-input v-model="form.username" placeholder="请输入用户名" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-row :gutter="20">
              <!-- 栏间隔20 -->
              <el-col :span="17">
                <el-input v-model="form.code" placeholder="请输入验证码" autocomplete="off"></el-input>
              </el-col>
              <el-col :span="7" class="code">
                <img :src="`data:image/png;base64,${codeImage}`" @click="getData"/>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="submitForm('form')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import loginPicture from '@/assets/login.jpg'
import { getCode, login } from '@/api/users'

export default {
  name: 'login',
  components: {

  },
  data () {
    return {
      codeImage: '',
      form: {
        username: '',
        password: '',
        code: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.form).then((response) => {
            if (response.data.data.level === '1') {
              this.$router.push({ name: 'managers' })
            } else if (response.data.data.level === '2') {
              localStorage.setItem('userInfo', JSON.stringify(response.data.data))
              this.$router.push({ name: 'module' })
            } else {
              this.$router.push({ name: 'login' })
            }
          })
        } else {
          return false
        }
      })
    },
    getData () {
      getCode().then((res) => {
        this.codeImage = res.data
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style lang="scss" scoped type="text/css">
  .login{
    background: url('/image/login.jpg') no-repeat;
    background-size: 100%,100%;
    .login-content{
      width:400px;
      height:300px;
      position: absolute;
      top:50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -200px;
      background: rgb(255, 255, 255);
      box-shadow: 0px 0px 25px #89bfdf;
      border-radius:10px;
      .logo{
        margin-left: 20px;
        font-size: 18px;
        line-height: 50px;
        color: #585454;
        font-family: sans-serif;
      }
      .login-form{
        margin:0px 15px;
        .code{
          display: flex;
          align-items: center;
          height: 40px;
          img {
            width: 100%;
          }
        }
        button{
          width:100%;
        }
      }
    }
  }
</style>
